<template>
  <!-- 底部服务保障 -->
  <div class="service-section">
    <div class="container">
      <div class="service-items">
        <div class="service-item">
          <el-icon class="service-icon"><CircleCheck /></el-icon>
          <span>正品保障</span>
        </div>
        <div class="service-item">
          <el-icon class="service-icon"><Clock /></el-icon>
          <span>7天无理由退货</span>
        </div>
        <div class="service-item">
          <el-icon class="service-icon"><Van /></el-icon>
          <span>15天免费换货</span>
        </div>
        <div class="service-item">
          <el-icon class="service-icon"><Coin /></el-icon>
          <span>满69元包邮</span>
        </div>
        <div class="service-item">
          <el-icon class="service-icon"><Lightning /></el-icon>
          <span>闪电发货</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  CircleCheck,
  Clock,
  Van,
  Coin,
  Lightning
} from '@element-plus/icons-vue'
</script>

<style scoped>
/* Service Section */
.service-section {
  background: #f8f9fa;
  padding: 30px 0;
  border-top: 1px solid #e0e0e0;
}

.service-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #666;
}

.service-icon {
  font-size: 24px;
  color: #ff8c00;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .service-items {
    flex-direction: column;
    gap: 20px;
  }
}
</style>